<template>
  <MainLayout>
    <section class="secure-content">
      <div class="container">
        <div class="secure-level">
          <div class="secure-level-content">
            <div class="secure-level-title">与我们的销售团队联系</div>
            <div class="secure-level-desc">
              了解AnyRender的商业工作空间，让团队合作变得简单直观。解锁您公司中更多人对3D文件的访问权限。
            </div>
            <div class="plan-title">我们的商业计划提供：</div>
            <div class="plan-list">
              <div class="plan-list-item">
                <div class="plan-list-item-icon">
                  <img src="/images/index/team/icon1.png" alt="" />
                </div>
                <div class="plan-list-item-title">企业级<br />安全</div>
                <div class="plan-list-item-desc">我们定期对数据、网络和基础设施安全进行漏洞扫描和渗透测试。</div>
              </div>
              <div class="plan-list-item">
                <div class="plan-list-item-icon">
                  <img src="/images/index/team/icon2.png" alt="" />
                </div>
                <div class="plan-list-item-title">访问控制<br />和权限</div>
                <div class="plan-list-item-desc">
                  管理谁可以查看或编辑文件，邀请成员加入工作区，或共享隐私集项目链接。
                </div>
              </div>
              <div class="plan-list-item">
                <div class="plan-list-item-icon">
                  <img src="/images/index/team/icon3.png" alt="" />
                </div>
                <div class="plan-list-item-title">支持<br />&培训</div>
                <div class="plan-list-item-desc">我们的行业项目经理将组建团队，提供培训和持续的技术支持。</div>
              </div>
            </div>
          </div>
          <div class="secure-iso">
            <el-form :model="form" :rules="rules" ref="formRef" @submit.native.prevent="handleSubmit(formRef)">
              <el-form-item>
                <el-input id="firstName" v-model="form.firstName" placeholder="名字" />
                <el-input id="lastName" v-model="form.lastName" placeholder="姓" />
              </el-form-item>
              <el-form-item>
                <el-input type="email" id="email" v-model="form.email" placeholder="工作邮件" />
              </el-form-item>
              <el-form-item>
                <el-input id="companyName" v-model="form.companyName" placeholder="公司名称" />
              </el-form-item>
              <el-form-item>
                <el-input id="jobTitle" v-model="form.jobTitle" placeholder="职称" />
              </el-form-item>
              <el-form-item>
                <el-input id="country" v-model="form.country" placeholder="国家" />
                <el-input id="companySize" v-model="form.companySize" placeholder="公司规模" />
              </el-form-item>
              <el-form-item>
                <el-input type="textarea" id="notes" :rows="4" v-model="form.notes" placeholder="提供更多细节" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" native-type="submit">提交</el-button>
              </el-form-item>
            </el-form>
            <p>
              如需技术或产品支持，请发送电子邮件至
              <a href="#">support@anyrender.net</a> 或访问我们的
              <a href="https://help.anyrender.net" target="_blank">帮助中心</a>。
            </p>
          </div>
        </div>
      </div>
    </section>
  </MainLayout>
</template>

<script setup>
  import { ref } from "vue";
  import { ElForm, ElFormItem, ElInput, ElButton } from "element-plus";

  const form = ref({
    firstName: "",
    lastName: "",
    email: "",
    companyName: "",
    jobTitle: "",
    country: "",
    companySize: "",
    notes: "",
  });

  const rules = {
    firstName: [{ required: true, message: "请输入名字", trigger: "blur" }],
    lastName: [{ required: true, message: "请输入姓", trigger: "blur" }],
    email: [
      { required: true, message: "请输入工作邮件", trigger: "blur" },
      { type: "email", message: "请输入有效的邮箱地址", trigger: ["blur", "change"] },
    ],
    companyName: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
    jobTitle: [{ required: true, message: "请输入职称", trigger: "blur" }],
    country: [{ required: true, message: "请输入国家", trigger: "blur" }],
    companySize: [{ required: true, message: "请输入公司规模", trigger: "blur" }],
  };

  const handleSubmit = formEl => {
    formEl.validate(valid => {
      if (valid) {
        // 提交表单逻辑
        console.log("提交成功", form.value);
      } else {
        console.log("提交失败");
        return false;
      }
    });
  };
</script>

<style lang="scss" scoped>
  @import "@/styles/variables.scss";

  .secure-content {
    padding: 30px 0 100px;
    .container {
      .secure-level {
        display: flex;
        justify-content: space-between;
        .secure-level-content {
          flex: 1 1 60%;
          display: flex;
          padding: 0 30px;
          flex-direction: column;
          justify-content: center;
          .secure-level-title {
            font-size: 48px;
            font-weight: 500;
            color: #000;
          }
          .secure-level-desc {
            margin: 30px 0 50px;
            font-size: 18px;
            color: #585858;
          }
          .plan-title {
            font-size: 20px;
            font-weight: 500;
            color: #585858;
            margin-bottom: 50px;
          }
          .plan-list {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
            .plan-list-item {
              margin-bottom: 20px;
              .plan-list-item-icon {
                width: 42px;
                height: 42px;
                margin-bottom: 10px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .plan-list-item-title {
                font-size: 20px;
                font-weight: 500;
                color: #383838;
                margin-bottom: 10px;
              }
              .plan-list-item-desc {
                font-size: 14px;
                color: #585858;
              }
            }
          }
        }
        .secure-iso {
          flex: 1 1 40%;
          background-color: #fff;
          padding: 20px;
          border-radius: 8px;
          .el-form-item {
            margin-bottom: 25px;
            :deep(.el-form-item__content) {
              flex: 1 1 100%;
              display: flex;
              gap: 25px;
              flex-wrap: nowrap;
            }
            .el-input {
              flex: 1 1 100%;
              width: 100%;
              background-color: #efefef;
              font-size: 14px;
              color: #929292;
              height: 40px;
              line-height: 40px;
              border-radius: 8px;
            }
            :deep(.el-input__wrapper) {
              padding: 10px;
              background: #efefef;
              .el-input__inner {
                height: 30px;
                line-height: 30px;
                border-radius: 8px;
                &::placeholder {
                  color: #929292;
                }
              }
            }
            :deep(.el-textarea) {
              .el-textarea__inner {
                background: #efefef;
                border-radius: 8px;
                &::placeholder {
                  color: #929292;
                }
              }
            }
            .el-button {
              background-color: #703ffa;
              color: white;
              width: 100%;
              height: 40px;
              line-height: 40px;
              border-radius: 8px;
              padding: 10px 16px;
              font-size: 16px;
            }
          }

          a {
            color: #703ffa;
            text-decoration: underline;
          }
        }
      }
    }
    // 响应式 电脑
    @media (max-width: $breakpoint-desktop) {
      .container {
        .secure-level {
          flex-wrap: wrap;
          .secure-level-content {
            flex: 1 1 100%;
            .secure-level-title {
              font-size: 42px;
            }
          }
        }
      }
    }
    // 响应式 平板
    @media (max-width: $breakpoint-tablet) {
      .container {
        .secure-level {
          flex-wrap: wrap;
          .secure-level-content {
            flex: 1 1 100%;
            .secure-level-title {
              font-size: 32px;
              text-align: center;
            }
            .secure-level-desc {
              font-size: 16px;
              text-align: center;
            }
            .plan-title {
              font-size: 16px;
            }
            .plan-list {
              .plan-list-item {
                .plan-list-item-title {
                  font-size: 18px;
                }
              }
            }
          }
        }
      }
    }
    // 响应式 手机
    @media (max-width: $breakpoint-mobile) {
      .container {
        .secure-level {
          flex-wrap: wrap;
          .secure-level-content {
            flex: 1 1 100%;
            .secure-level-title {
              font-size: 28px;
            }
            .secure-level-desc {
              font-size: 16px;
            }
            .plan-title {
              font-size: 18px;
            }
            .plan-list {
              .plan-list-item {
                .plan-list-item-title {
                  font-size: 18px;
                }
                .plan-list-item-desc {
                  font-size: 14px;
                }
              }
            }
          }
          .secure-iso {
            flex: 1 1 100%;
            .el-form-item {
              :deep(.el-form-item__content) {
                flex-wrap: wrap;
              }
            }
          }
        }
      }
    }
  }
</style>
